
.wrap{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    background-image: url($imgUrl + "/lt_bg.jpg") ;
    background-repeat: no-repeat;
    flex-direction: column;
    .back{
     width: 95%;
     margin: 0 auto;
     padding-top:calc(var(--status-bar-height) + 60rpx) ;
      height: 120rpx;
      image{
       width: 76rpx;
       height: 64rpx;
      }
    }
    .content{
     width: 95%;
     margin: 20rpx auto;
     .hine{
       height: 90rpx;
       color: #fff;
       font-size: 24rpx;
       &:focus {
       outline: 2px dotted blue;
     } 
     }
    }
   }
   .text-dashed {
     margin: 20rpx auto 40rpx;
     width: 80%;
     .line{
       border-top: 1rpx dashed #ffffff5c;
     }
     position: relative;
    
     .view{
       width: 70%;
       background: #1f1e1e;
       position: absolute;
       left: 15%;
       top: -14rpx;
       z-index: 1;
       color: #ffffff5c;
       font-size: 26rpx;
       text-align: center;
       
     }
   }
   .list{
     margin-top: 60rpx;
     display: flex;
    flex-direction: column;
     &_item{
       display: flex;
       margin-bottom: 60rpx;
       .user {
         width: 80rpx;
         height: 80rpx;
       }
   
       &_information{
         position: relative;
        max-width: 460rpx;
         min-height: 46rpx;
         padding: 20rpx;
         background-color: #1c4b3eb6;
         .back_user{
          max-width:280rpx;
          max-height: 280rpx;
         }
         .back_image{
          max-width: 280rpx;
          max-height: 280rpx;
         }
         text{
           padding: 20rpx;
           color: #fff;
           font-size: 26rpx;
         }
       }
     }
     &_left{
       .list_item_information{
         margin-left: 40rpx;
         &:before{
           content: "";
           position: absolute;
           top: 28%;
           left: -20rpx;
           border-top: 20rpx solid transparent; /* 上边框透明 */
           border-right: 20rpx solid #1c4b3eb6; /* 右边框为三角形颜色 */
           border-bottom: 20rpx solid transparent; /* 下边框透明 */
         
         }
    
       }
     }
     &_right{
       justify-content: flex-end;
       .list_item_information{
       
         margin-right: 40rpx;
         &:before{
           content: "";
           position: absolute;
           top: 28%;
           right: -20rpx;
           border-top: 20rpx solid transparent; /* 上边框透明 */
           border-left: 20rpx solid #1c4b3eb6; /* 右边框为三角形颜色 */
           border-bottom: 20rpx solid transparent; /* 下边框透明 */
         
         }
         
       }
     }
   }
   .bottom{
     position: fixed;
     height: 150rpx;
     left: 5%;
     bottom: 0;
     z-index: 2;
     display: flex;
     align-items: center;
     width: 90%;
     &_input{
      border: 2rpx solid #179371;
      width: 80%;
      background: #1793724b;
      color: #fff;
      font-size: 26rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
       
     }
     &_button{
       width: 20%;
       button{
         background-color: #0ffdbb;
       color: #1d1d1d;
       font-size: 26rpx;
       border: none;
       border-radius: 0;
       border: 0;
       padding: 0;
       height: 83rpx;
       line-height: 83rpx;
       
       }
     }
   }
   .type {
    position: absolute;
    bottom: 120rpx;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    &-list {
      display: flex;
      overflow-x: scroll;
      width: 700rpx;
      &-item {
        border-radius: 4rpx;
        margin: 0 4rpx;
        width: 170rpx;
        color: #fff;
        @include center();
        padding: 8rpx;
        background-color: #808080;
      }
      &-active {
        margin: 0 4rpx;
        border-radius: 4rpx;
        width: 170rpx;
        color: #fff;
        @include center();
        padding: 8rpx;
        background-color: #1c4b3eb6;
      }
    }
    &-title {
      width: 700rpx;
      margin: 20rpx 0;
      color: #fff;
    }
  }
  .footer {
    width: 95%;
    position: fixed;
    bottom: 50rpx;
    display: flex;
    justify-content: center;

    height: 90rpx;
    .up {
      @include btn($width: 50%);
      border-radius: 0;
    }
    .start {
      @include btn($width: 50%);
      border-radius: 0;
      background-image: linear-gradient(90deg, #ffc440 0, #fcb36e 100%);
    }
  }